<template>
  <div class="home">
    <div ref="mescroll" class="mescroll">
      <swiper class="home-swiper" :options="bannerHome" v-if="bannerList && bannerList.length > 0">
        <swiper-slide class="swiper-demo-img" v-for="(item, index) in bannerList" :key="index"><a :href="item.ad_link" v-if="item.ad_link"><img :src="item.ad_code"></a><img :src="item.ad_code" v-else alt=""></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="exam">
        <div class="top">
          <img src="@/assets/shouyeb1.png" alt="">
          <span>专业天赋检测</span>
          <img src="@/assets/shouyeb1.png" alt="">
        </div>
        <div class="item clear">
          <img @click="router({path: 'talent', query:{article_type: 'adult'}})" src="@/assets/shouyeb2.png" alt="">
          <img @click="examClick(2)" src="@/assets/shouyeb3.png" alt="">
          <img @click="examClick(1)" src="@/assets/shouyeb4.png" alt="">
        </div>
      </div>
      <div class="section">
        <div class="top clear">
          <span class="title">{{mofang.title}}</span>
          <span class="tip">{{mofang.subtitle}}</span>
          <span class="more" @click="router({path: 'classify', query: {columId: mofang.id}})">查看更多 <img class="arrow" src="@/assets/xuanzedingzhi02.png" alt=""></span>
        </div>
        <div class="flex mofang clear">
          <span class="img" v-for="item in mofang._child" @click="router({path: 'courseList',query:{tcate:item.id}})"><img :src="item.img" alt=""></span>
        </div>
      </div>
      <div class="section">
        <div class="top clear">
          <span class="title">{{xueba.title}}</span>
          <span class="tip">{{xueba.subtitle}}</span>
          <span class="more" @click="router({path: 'classify', query: {columId: xueba.id}})">查看更多 <img class="arrow" src="@/assets/xuanzedingzhi02.png" alt=""></span>
        </div>
        <div class="xuba clear">
          <div v-for="item in xueba._child" class="item" @click="router({path: 'courseList',query:{tcate:item.id}})">
            <img :src="item.img" alt="">
          </div>    
        </div>
      </div>
      <swiper :options="bannerOption" class="swiper-ad">
        <swiper-slide class="swiper-ad-img" v-for="(item, index) in adv" :key="index"><a :href="item.url" v-if="item.url"><img :src="item.img"></a><img :src="item.img" v-else alt=""></swiper-slide>
        <div class="swiper-pagination"  slot="pagination"></div>
      </swiper>
      <div class="section border-none">
        <div class="top clear">
          <span class="title">{{shejiao.title}}</span>
          <span class="tip">{{shejiao.subtitle}}</span>
          <span class="more" @click="router({path: 'classify', query: {columId: shejiao.id}})">查看更多 <img class="arrow" src="@/assets/xuanzedingzhi02.png" alt=""></span>
        </div>
        <div class="shejiao clear">
          <div v-for="item in shejiao._child" class="item" @click="router({path: 'courseList', query:{tcate:item.id}})">
            <img :src="item.img" alt="">
            <div class="con">
              <p class="title">{{item.title}}</p>
              <p class="tip">{{item.subtitle}}</p>
            </div>
          </div>   
        </div>
      </div>
      <div class="section">
        <div class="top clear">
          <span class="title">天赋少年</span>
          <span class="tip">学而思爱智康</span>
        </div>
        <news-list :newsLists="newsList"></news-list>
      </div>
    </div>
    <alert-box :alert-message = "alert"  v-if="alert"></alert-box>
    <div v-transfer-dom class="home-dialog">
      <popup v-model="show" @click="show = false">
        <div class="popup0">
          <div class="title">选择密钥 <p class="explain" @click="router({path: 'explain'})"><img src="@/assets/shaoerertongxuanzemishitanchuang01.png" alt=""> 使用说明</p></div>
          <div class="list">
            <div class="item" v-for="(item, index) in keyList" :key="index" @click="keyCheckFn(index+1, item.is_type, item.miyao)">
              <span>{{item.miyao_username}}（剩余{{5 - item.nums}}次）</span>
              <span class="status" v-if="item.is_type > 0 && item.is_type == '2'">少年</span>
              <span class="status" v-else-if="item.is_type > 0 && item.is_type == '1'">儿童</span>
              <span class="status" v-else>未使用</span>
              <img v-if="(key_check == index+1)" src="@/assets/shaoerertongxuanzemishitanchuang02.png" alt="">
            </div>
          </div>
          <span class="btn" @click="confirm">确认选择</span>
        </div>
      </popup>
    </div>
  </div>
</template>

<script>

import { TransferDom, Popup } from 'vux'
import newsList from '@/components/newsList'
import alertBox from '@/components/alertBox'
import { swiper, swiperSlide } from 'vue-awesome-swiper'
import 'swiper/dist/css/swiper.css'
import MeScroll from 'mescroll.js'
import 'mescroll.js/mescroll.min.css'
import { home, oauth, getHomeNews, getKeyList } from '@/api/api'
import { wxlocation } from "@/config/wxLocation.js"

export default {
  directives: {
    TransferDom
  },
  components: {
    swiper,
    swiperSlide,
    newsList,
    alertBox,
    Popup,
  },
  data () {
    return {
      bannerHome: {
        loop: true,
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        }
      },
      bannerOption: {
        pagination: {
          el: '.swiper-pagination',
          clickable: true
        },
        autoplay: {
          delay: 3000,
          stopOnLastSlide: false,
          disableOnInteraction: true,
        },
        loop: true,
        observer:true,
        observeParents:true,
      },
      mescroll: null,
      dataList: [],
      alert: '',
      show: false,
      key_check: 0,
      bannerList: [],
      mofang:[],
      xueba:[],
      shejiao:[],
      adv:[],
      newsList: [],
      keyList: [],
      is_juvenile: '', //判断是少年还是儿童
      key: '', //秘钥
    }
  },
  created () {
    this.getHome()
    this.get_key_list()
  },
  mounted () {
    this.alert = {
      title: '提示',
      tip: '您还没开通定制计划方案，暂不能测试',
      btn: '去开通',
      path: {path: '/customized'},
      is_show: false
    }
    this.mescroll = new MeScroll(this.$refs.mescroll, { 
      up: {
        callback: this.upCallback
      }
    })
  },
  methods: {
    examClick (index) {
      this.is_juvenile = index;
      if(this.keyList.length > 0){
        this.show = true
      }else{
        this.alert.is_show = true
      }      
    },
    router (path) {
      this.$router.push(path)
    },
    confirm() {
      // localStorage.removeItem('adultNum')
      // localStorage.removeItem('order_id')
      var change_con = "";
      if(this.is_juvenile == '1'){
        change_con = 'children';
      }else{
        change_con = 'juvenile';          
      }
      this.router({path: './examStart', query: {article_type: change_con, key: this.key}});
    },
    keyCheckFn (index, is_type, key) {
      this.key = key;
      if(this.is_juvenile == is_type || is_type == 0){
        this.key_check = index
      }else{
        this.show = !this.show
        var text_juvenile = "";
        if(this.is_juvenile == '1'){
          text_juvenile = '少年';
        }else{
          text_juvenile = '儿童';
        }
        this.alert = {
          title: '提示',
          tip: '该密钥只能用于（'+text_juvenile+'）测试',
          btn: '确定',
          path: {},
          is_show: true
        }
      }
      console.log(is_type)
    },
    getHome () {
      home().then((res) => {
        this.bannerList = res.data.data.banner
        this.mofang=res.data.data.course[0]
        this.xueba=res.data.data.course[1]
        this.shejiao=res.data.data.course[2]
        this.adv=res.data.data.adv
      }).catch((err) => {
        console.dir(err)
      })
    },
    upCallback (page) {
      getHomeNews(page.num, page.size).then((res) => {
        if (page.num == 1){
          this.newsList = []
        }
        this.$nextTick(() => {
          this.mescroll.endSuccess(res.data.data.list);
        })
        for(var i in res.data.data.list){
          res.data.data.list[i].type = "course"
        }
        this.newsList = this.newsList.concat(res.data.data.list)
      }).catch((err) => {
        console.dir(err)
        this.mescroll.endErr()
      })
    },
    // 获取秘钥列表
    get_key_list() {
      var dataJson = {
        ostatus: 1
      }
      getKeyList(dataJson).then((res) => {
        this.keyList = res.data.data.list
      }).catch((err) => {
        console.dir(err)
      })
    }
  }
}
</script>
<style lang="stylus" scoped>
  .home
    max-width 100vw
    min-height 100vh
    overflow hidden
    .mescroll
      position fixed
      top 0
      bottom 0
      height auto
      background-color #fff
      padding-bottom 6rem
      box-sizing border-box
      .swiper-demo-img
        padding 1rem 1.5rem
        box-sizing border-box
        img
          height 16.3rem
          object-fit cover
          border-radius .5rem
          overflow hidden
      .swiper-ad-img
        padding 0
      .exam
        padding-top 2rem
        padding-bottom .5rem
        .top
          text-align center
          img
            display inline-block
            vertical-align middle
            width 3.7rem
          span
            font-size 1.5rem
            line-height 1.5rem
            height 1.5rem
            color #333
            font-weight 500
            vertical-align middle
            display inline-block
            margin 0 .5rem
        .item
          margin-top 2rem
          img
            float left
            width 33.3%
      .section
        padding 0 1.5rem
        border-top 1px solid #E6E6E6
        padding-bottom .5rem
        .top
          padding-top 3rem
          padding-bottom 2rem
          .title
            color #333
            font-size 1.8rem
            line-height 1.8rem
            font-weight bold
          .tip
            font-size 1.3rem
            color #999
            margin-left 1rem
            line-height 1.3rem
          .more
            color #999
            font-size 1.3rem
            line-height 1.8rem
            float right
            position relative
            padding-right 1rem
            .arrow
              width .6rem
              position absolute
              right 0
              top .3rem
        .mofang
          .img
            float: left
            width calc(33.3vw - 1.8rem)
            height calc(33.3vw - 1.8rem)
            display flex
            margin-bottom 2rem
            img
              object-fit contain
            &:nth-child(2)
              margin 0 1.2rem
        .xuba
          .item
            float left
            width calc(50% - .75rem)
            border-radius .3rem
            overflow hidden
            position relative
            margin-bottom 1.5rem
            &:nth-child(2n+1)
              margin-right 1.5rem
        .shejiao
          .item
            float left
            width calc(50% - .5rem)
            margin-bottom 1rem
            position relative
            &:nth-child(2n+1)
              margin-right 1rem
            .con
              position absolute
              top 0
              padding-left 1.7rem
              padding-top 1.7rem
              .title
                font-size 1.7rem
                height 1.7rem
                line-height 1.7rem
                font-weight 800
              .tip
                font-size 1.2rem
                line-height 1.2rem
                height 1.2rem
                color #999
                margin-top 1.2rem
                width calc(100vw - 26rem)
                overflow hidden
                white-space nowrap
                text-overflow ellipsis
        .news
          padding 0
      .border-none
        border none
  .popup0
    .title
      font-size 1.7rem
      text-align center
      line-height 5rem
      position relative
      color #333
      .explain
        position absolute
        right 1.7rem
        top 0
        font-size 1.5rem
        padding-left 2.2rem
        img
          position absolute
          left 0
          top 1.75rem
          width 1.5rem
    .list
      height 30rem
      overflow auto
      .item
        line-height 5rem
        height 5rem
        font-size 1.5rem
        color #333
        position relative
        margin-left 1.5rem
        border-bottom 1px solid #e6e6e6
        overflow hidden
        .status
          color #ea2121
          float right
          padding-right 5.5rem
        img
          position absolute
          width 2rem
          right 1.5rem
          top 1.5rem
    .btn
      margin .8rem 1.5rem
      background-color #172F6D
      height 4rem
      line-height 4rem
      display block
      text-align center
      font-size 1.5rem
      color #fff
      border-radius 100px
      position absolute
      bottom 0
      width calc(100% - 3rem)
      &::after
        content ''
        width calc(100% + 3rem)
        position absolute
        left -1.5rem
        top -.8rem
        height 1px
        background-color #e6e6e6
</style>